<template>
	<view class="container">
		<view :style="{ height: tops + 'px' }"></view>
		<view class="tui-searchbox" :style="{ height: barHeight + 'px;margin-top:' + tops + 'px' }">
			<view class="tui-search-input" @tap="search">
				<icon type="search" :size="13" color="#999"></icon>
				<text class="tui-search-text">搜索</text>
			</view>
		</view>
		<view class="nav-wrapper" v-if="categorystyle != 4">
			<view class="nav">
				<view :class="['nav-item', currentTab == index ? 'active' : '']" v-for="(item, index) in Category" :key="index" @click="swichNav(item.id, index)">
					<image :src="item.image || '/staic/images/map.png'"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>

		<block v-if="categorystyle == 1">
			<scroll-view @scrolltolower="tolower" scroll-y class="right-box" :scroll-into-view="floorNum" :style="'height:' + height + 'px;top:' + top + 'px'">
				<view class="page-view">
					<swiper v-if="banners.length > 0" indicator-dots autoplay circular :interval="5000" :duration="150" class="swiper">
						<swiper-item v-for="(item, index) in banners" :key="index">
							<image :data-url="item.url" @tap="navigationTo" :src="item.pic" mode="widthFix" class="slide-image" />
						</swiper-item>
					</swiper>
					<view class="class-box">
						<block>
							<block v-for="(goods, index) in goodsList" :key="index">
								<view class="goods-item" @tap="toDetailsTap" :data-id="goods.id">
									<image class="goods-pic" mode="widthFix" lazy-load="true" :src="goods.pic"></image>
									<view class="goods-info">
										<text>{{ goods.name }}</text>
										<text style="color:red;">￥{{ goods.price }}</text>
									</view>
								</view>
							</block>
						</block>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-if="categorystyle == 2">
			<scroll-view @scrolltolower="tolower" scroll-y class="right-box" :scroll-into-view="floorNum" :style="'height:' + height + 'px;top:' + top + 'px'">
				<view class="page-view">
					<swiper v-if="banners.length > 0" indicator-dots autoplay circular :interval="5000" :duration="150" class="swiper">
						<swiper-item v-for="(item, index) in banners" :key="index">
							<image :data-url="item.url" @tap="navigationTo" :src="item.pic" mode="widthFix" class="slide-image" />
						</swiper-item>
					</swiper>
					<view class="class-box">
						<view class="class-item" :id="'b' + item.id" v-if="Category.length > 0" v-for="(item, index) in Category" :key="index">
							<view class="class-name">{{ item.title }}</view>
							<view class="g-container">
								<view class="g-box" v-for="(son, i1) in item.son" :key="i1" @tap.stop="gogoodsList" :data-cid="son.id" :data-key="son.title">
									<image :src="son.icon" class="c-image" />
									<view class="g-title">{{ son.title }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-if="categorystyle == 3">
			<scroll-view @scrolltolower="tolower" scroll-y class="right-box" :scroll-into-view="floorNum" :style="'height:' + height + 'px;top:' + top + 'px'">
				<view class="page-view">
					<swiper v-if="banners.length > 0" indicator-dots autoplay circular :interval="5000" :duration="150" class="swiper">
						<swiper-item v-for="(item, index) in banners" :key="index">
							<image :data-url="item.url" @tap="navigationTo" :src="item.pic" mode="widthFix" class="slide-image" />
						</swiper-item>
					</swiper>
					<view class="class-box">
						<view class="class-item" :id="'b' + item.id" v-if="Category.length > 0" v-for="(item, index) in Category" :key="index">
							<view class="class-name">{{ item.title }}</view>
							<view class="g-container">
								<view class="g-box" v-for="(goods, i1) in item.goodslist" :key="i1" @tap.stop="toDetailsTap" @tap="toDetailsTap" :data-id="goods.id">
									<image :src="goods.image" class="g-image" />
									<view class="g-title">{{ goods.name }}</view>
									<view class="price" style="color:red;">￥{{ goods.price }}起</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-if="categorystyle == 4">
			<view class="lr-flax" :style="'height:' + height + 'px;margin-top:' + top + 'px'">
				<scroll-view scroll-y class="left-cate" scroll-with-animation :scroll-into-view="rightIndex">
					<view
						v-for="(item, index) in Category"
						:key="index"
						:id="'left' + index"
						:class="['left-cate-item', currentLeftCateIndex === index ? 'left-cate-item-active' : '']"
						@tap="tapLeftBox(item, index)"
					>
						<text :class="['left-cate-item-text', currentLeftCateIndex === index ? 'left-cate-item-text-active' : '']">{{ item.title }}</text>
					</view>
				</scroll-view>

				<scroll-view scroll-y class="right-cate" scroll-with-animation :scroll-into-view="rightIndex" @scroll="leftScroll">
					<view class="title">
						{{ categoryTitle }}
					</view>
					<view class="" style="display: flex;">
						<view class="right-cate-item" v-for="item in goodsList" :key="item.brand_id" @click="toGoodDetailTap(item)">
							<image :src="item.pic" mode="" style="width: 120rpx;height: 120rpx;"></image>
							<view class="text-light-muted">{{ item.goods_name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</block>

		<tui-tabbar :current="current"></tui-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: '',
			banners: [],
			Category: [],
			categoryId: '',
			categorystyle: 0,
			goodsList: [],
			page: 1,
			getSon: [],
			height: 0, //scroll-view高度
			top: 0,
			currentTab: 0, //预设当前项的值
			floorNum: '',
			number: '',
			scrollRight: 0,
			scrollViewId: 'id_0',
			currentLeftCateIndex: 0,
			rightIndex: 'right0',
			leftIndex: 'left0',
			topList: [], //右边title top的值
			barHeight: 0,
			tops: 0,
			categoryTitle: ''
		};
	},
	watch: {
		categorystyle() {
			uni.getSystemInfo({
				success: res => {
					let searchHeight = 92;
					let wapperHeight = 145;
					let top = 0;
					if (this.categorystyle == 4) {
						this.height = res.windowHeight - 52 - uni.upx2px(searchHeight);
						this.top = top + uni.upx2px(searchHeight);
					} else {
						this.height = res.windowHeight - 52 - wapperHeight;
						this.top = top + wapperHeight;
					}

					console.log('watch');
				}
			});
			this.getRightTop();
		}
	},
	onLoad: function(options) {
		let _this = this;
		this.current = '/' + this.__route__;

		this.getConfigStyleStyle();
		this.getCategoryall();
		this.getbanners();
	},
	onShow() {},

	onReady() {
		uni.getSystemInfo({
			success: e => {
				this.tops = e.statusBarHeight;
				let custom = uni.getMenuButtonBoundingClientRect();
				this.barHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
			}
		});
	},
	methods: {
		toGoodDetailTap(item) {
			uni.navigateTo({
				url: "/pages/goodsDetail/goodsDetail?id=" +  item.id
			});
		},
		getConfigStyleStyle() {
			console.log('getstyle');
			this.$request
				.post('config', {
					mo: 'categorystyle'
				})
				.then(res => {
					console.log(res);
					if (res.errno == 0) {
						if (res.data.categorystyle) {
							this.categorystyle = res.data.categorystyle;
						}
					}
				});
		},
		// 点击标题切换当前页时改变样式
		swichNav: function(Categoryid, e) {
			let cur = e;
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				this.checkCor();
			}

			if (this.categorystyle == 1) {
				this.categoryId = Categoryid;
				this.page = 1;
				this.getGoodsList();
			} else {
				this.floorNum = 'b' + Categoryid;
			}
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor: function() {
			if (this.currentTab > 6) {
				this.scrollViewId = `id_${this.currentTab - 2}`;
			} else {
				this.scrollViewId = `id_0`;
			}
		},
		gogoodsList(e) {
			let key = e.currentTarget.dataset.key;
			let cid = e.currentTarget.dataset.cid;
			uni.navigateTo({
				url: '/pages/goodsList/goodsList?cid=' + cid + '&searchKey=' + key
			});
		},
		toDetailsTap: function(e) {
			uni.navigateTo({
				url: '/pages/goodsDetail/goodsDetail?id=' + e.currentTarget.dataset.id
			});
		},
		navigationTo: function(e) {
			this.sam.navigateTo(e.currentTarget.dataset.url);
		},
		search: function() {
			uni.navigateTo({
				url: '/pages/common/search/search'
			});
		},
		getbanners: function() {
			let _this = this;
			this.$request.get('ad.indexlist').then(res => {
				if (res.errno == 0) {
					this.banners = res.data;
				}
			});
		},
		getCategoryall: function() {
			let _this = this;
			this.$request
				.get('Category.all', {
					ptype: 2
				})
				.then(res => {
					if (res.errno == 0) {
						_this.Category = res.data;
						_this.categoryTitle = res.data[0].title
						_this.categoryId = _this.Category[0].id;
						_this.getGoodsList();
						setTimeout(function() {
							_this.infoScroll();
						}, 500);
						console.info('services---request---getsonList--右侧二级三级分类成功');
					}
				});
		},
		getGoodsList: function() {
			let that = this;
			if (that.page == 1) {
				that.goodsList = [];
			}

			this.$request
				.post('goods', {
					categoryId: that.categoryId,
					page: that.page,
					pageSize: 1000,
					ptype: 2
				})
				.then(res => {
					that.goodsList = res.data.data;
					console.log(that.goodsList, 'xxxxxxxx');
					uni.hideNavigationBarLoading();
				})
				.catch(e => {
					uni.hideNavigationBarLoading();
				});
		},
		infoScroll: function() {
			let _this = this;
			let len = _this.Category.length;
			if (_this.Category[len - 1].son) {
				this.number = _this.Category[len - 1].son.length;
			}
		},
		tolower: function() {
			if (this.categorystyle == 1) {
				this.getGoodsList();
			}
		},
		tapLeftBox: function(item, index) {
			this.currentLeftCateIndex = index;
			this.rightIndex = 'right' + index;
			this.categoryId = item.id
			this.categoryTitle = item.title
			this.getGoodsList()
		},
		getRightTop() {
			setTimeout(() => {
				this.topList = [];
				let searchH = uni.upx2px(92);
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.right-cate-item')
					.boundingClientRect(data => {
						data.forEach(item => {
							this.topList.push(item.top - searchH);
						});
					})
					.exec();
			}, 300);
		},
		leftScroll(e) {
			const scrollTop = e.target.scrollTop; //获取屏幕滚动的距离
			for (var i = 0; i <= this.topList.length; i++) {
				if (scrollTop >= this.topList[i] && scrollTop <= this.topList[i + 1]) {
					if (!(this.scrollRight < scrollTop && this.currentLeftCateIndex > i)) {
						this.currentLeftCateIndex = i;
						this.rightIndex = 'left' + i;
					}
				}
			}
			this.scrollRight = scrollTop;
		}
	}
};
</script>

<style>
page {
	background: #fcfcfc;
}

/* 左侧导航布局 start*/

/* 隐藏scroll-view滚动条*/

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.tui-searchbox {
	width: 100%;
	height: 92rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

/* .tui-searchbox::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #d2d2d2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
 */
.tui-search-input {
	width: 60%;
	height: 60rpx;
	background: #f1f1f1;
	border-radius: 30rpx;
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
	padding-left: 20rpx;
}

.tui-search-text {
	padding-left: 16rpx;
}

.tab-view {
	/* height: 100%; */
	background: #f6f6f6;
	width: 200rpx;
	position: fixed;
	left: 0;
	z-index: 10;
	padding-bottom: 100rpx;
}

.tab-bar-item {
	width: 200rpx;
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
}

.active {
	position: relative;
	color: #000;
	font-size: 30rpx;
	font-weight: 600;
	background: #fcfcfc;
}

.active::before {
	content: '';
	position: absolute;
	border-left: 8rpx solid #e41f19;
	height: 30rpx;
	left: 0;
}

/* 左侧导航布局 end*/

.right-box {
	width: 100%;
	position: fixed;
	/* padding-left: 220rpx; */
	box-sizing: border-box;
	top: 275rpx;
	left: 0;
}

.page-view {
	width: 100%;
	overflow: hidden;
	padding-top: 20rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.swiper {
	width: 100%;
	height: 150rpx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateZ(0);
}

/* #ifdef MP-WEIXIN */
.swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.swiper .wx-swiper-dot-active::before {
	background: #fff;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .swiper .uni-swiper-dot-active::before {
	background: #fff;
}

>>> .swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

.slide-image {
	width: 100%;
	height: 100%;
}

.class-box {
	padding-top: 10rpx;
}

.class-item {
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
}

.class-name {
	font-size: 22rpx;
}

.g-container {
	/* padding-top: 20rpx; */
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.g-box {
	width: 33.3333%;
	text-align: center;
	padding-top: 40rpx;
}

.g-box .price {
	text-align: center;
	font-size: 24rpx;
}

.c-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
}

.g-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
}

.g-title {
	font-size: 22rpx;
}

.goods-item {
	width: 96%;
	height: 150rpx;
	display: flex;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 12px;
	padding-bottom: 12px;
	flex-direction: row;
	margin-left: 20rpx;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 1rpx dotted #f2f2f2;
}

.goods-pic {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.goods-info {
	display: flex;
	flex-direction: column;
	padding: 6px 5px 0px 5px;
	height: 70px;
	font-size: 24rpx;
	justify-content: space-between;
}

.lr-flax {
	display: flex;
	width: 100%;
}
.left-cate {
	width: 25%;
	background-color: #f3f3f5;
}
.left-cate-item {
	width: 100%;
	height: 100rpx;
	line-height: 60rpx;
	text-align: center;
	box-sizing: border-box;
	padding: 20rpx 0;
}
.left-cate-item-text {
	width: 100%;
	white-space: nowrap;
	display: inline-block; /*一定要将div设置为inline-block*/
	vertical-align: middle; /*设置该元素在父元素中的位置*/
}
.left-cate-item-active {
	font-weight: bold;
	background-color: white;
}
.left-cate-item-text-active {
	box-sizing: border-box;
	border-left: 8rpx solid #2d6cf5;
	color: #2d6cf5;
}

.right-cate {
	width: 75%;
}
.right-cate .title {
	margin: 20rpx;
	font-weight: 600;
	font-size: 34rpx;
}
.right-cate-item {
	width: 32%;
	margin-bottom: 50rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 10rpx;
}
.right-cate-item .text-light-muted  {
	font-size: 24rpx;
	margin-top: 10rpx;
}
.right-cate-title {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	padding-left: 20rpx;
}
.right-cate-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-left: 60rpx;
}
.right-cate-flex-son {
	width: 30%;
}
</style>
<style scoped>
.nav-wrapper {
	width: 100%;
	background: #f3f3f3;
}
.nav {
	width: 95%;
	margin: 100rpx auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow-y: auto;
	padding: 20rpx;
	box-sizing: border-box;
}
.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	padding: 20rpx;
	background: #fff;
	margin-right: 10rpx;
}
.nav-item.active {
	color: red;
}
.nav-item image {
	width: 60rpx;
	height: 60rpx;
}
.nav-item text {
	font-size: 20rpx;
	padding-top: 10rpx;
}
.active::before {
	display: none;
	content: '';
	position: absolute;
	border-left: 8rpx solid #e41f19;
	height: 30rpx;
	left: 0;
}
</style>
